<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>收益明细</title>
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/profit.css"/>
		<link rel="stylesheet" type="text/css" href="css/idangerous.swiper.css"/>
		<link href="css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" />
		<link href="css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" />
		<link href="css/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="css/mescroll.min.css"/>
	</head>
	<style type="text/css">
		/*移动端1px下边线*/
		.border{ position: relative; }
		.border:after{ content: ''; display:block; position: absolute; width: 100%; left: 0px; bottom: 0px;height: 1px; background-color:  #D6D6D6; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);}
		.title_head{position: absolute;font-size: 0.28rem;color: #373839;left: 0.2rem;top: 0.3rem;}
		.time{position: absolute;font-size: 0.2rem;color: #6b6c6d;top: 0.7rem;border-bottom:1px #bfd3de solid;width: 4.2rem;text-align: right;padding-right: 0.2rem;padding-bottom: 0.05rem;}
		.monybox{height: 0.96rem;width: 2.85rem;position: absolute;top: 1.3rem;left: 0.7rem;}
		.money{font-size: 0.44rem;}
		.tips{font-size: 0.22rem;margin-top: 0.05rem;margin-left: 0.4rem;}
		.menu{height: 1.45rem;}
		.yearno{height: 0.5rem;line-height: 0.5rem;font-size: 0.3rem;margin-bottom: 0.2rem;}
		.search{width: 6.98rem;height: 0.64rem;border:solid #d6d6d6 1px;margin: 0 auto;border-radius: 15px;font-size: 0.28rem;}
		.searchbox{color: #59b8f5;margin-right: 0.2rem;}
		.searchbox img{width: 0.28rem;height: auto;margin-left: 0.03rem;}
		.profitlist{height: 6rem;margin-top: 0.4rem;}
		.item{height: 0.79rem;font-size: 0.3rem;}
	</style>
	<body>
		<div id="year">
			<!-- template_year -->
		</div>
		<!-- 收益明细列表 -->
		<div class="profitlist">
			<div id="mescroll" class="mescroll">
			<ul id="dataList" class="data-list">
				<!-- template_datalist -->
			</ul>
			</div>
		</div>
		<!-- 筛选model框 -->
		<div class="modelbg" hidden></div>
		<div class="model" hidden>
			<p>收益明细筛选</p>
			<div class="start flex flex-align-center" style="margin-top: 0.4rem;">
				<p style="font-size: 0.3rem;">开始时间:</p>
				<input type="text" id="start" class="input_time"/>
			</div>
			<div class="start flex flex-align-center">
				<p style="font-size: 0.3rem;">结束时间:</p>
				<input type="text" id="end" class="input_time"/>
			</div>
			<div class="btn flex flex-align-center">
				<div class="btnitem flex flex-align-center flex-pack-center" id="cancel">
					<p>取消</p>
				</div>
				<div class="btnitem flex flex-align-center flex-pack-center" style="border-left: 1px solid #D6D6D6;" id="confirm">
					<p style="color: #0880D6;">确认</p>
				</div>
			</div>
		</div>
		<!-- 按月，年统计渲染模板开始 -->
		<script type="text/html" id="template_year">
			<div class="banner">
				<div class="swiper-container">
			         <div class="swiper-wrapper">
			         	<% for (var i in data.queryList){%>
				        <div class="swiper-slide">
				          <div class="title">
				          	<div class="box">
				          		<p class="title_head"><%= data.queryList[i].month %></p>
					          	<p class="time"><%= data.queryList[i].firstDay %>-<%= data.queryList[i].lastDay %></p>
					          	<div class="monybox">
					          		<p class="money">￥<%= data.queryList[i].amount %></p>
					          		<p class="tips">本月总收益（元）</p>
					          	</div>
				          	</div>
				          </div>
				        </div>
				        <%}%>
				      </div>
		    	</div>
			</div>
			<!-- 年化收益 筛选 -->
			<div class="menu">
				<div class="yearno flex flex-align-center">
					<p style="margin-left: 0.2rem;" class="flex-1">我的年收益</p>
					<p style="margin-right: 0.3rem;">￥<span id="yearDate"><%= data.currentYearCount %></span></p>
				</div>
				<div class="search flex flex-align-center">
					<p class="flex-1" style="margin-left: 0.2rem;">优鸟收益明细</p>
					<div class="searchbox flex flex-align-center" onclick="searchbox()">
						<p>筛选</p>
						<img src="img/search_03.png"/>
					</div>
				</div>
			</div>
	</script><!-- 按月，年统计渲染模板结束 -->
	<!-- 列表渲染 -->
	<script type="text/html" id="template_datalist">
		<%for(var i in data){%>
		<li>
			<div class="item flex flex-align-center border">
				<p style="margin-left: 0.2rem;" class="flex-1"><%= data[i].date %></p>
				<p style="margin-right: 0.2rem;">+￥<%= data[i].amount %></p>
			</div>
		</li>
		<%}%>
	</script>
	</body>
	<script type="text/javascript" src="js/rem.js"></script>
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/idangerous.swiper.min.js"></script>
	<script src="js/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
	<script src="js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script>
	<script src="js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
	<script src="js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script>
	<script src="js/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/layer.js"></script>
	<script type="text/javascript" src="js/template.js"></script>
	<script type="text/javascript" src="js/api.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/mescroll.min.js"></script>
	<script type="text/javascript" src="js/profit.js"></script>
</html>
